<!--
 * @Autor: lh
 * @Date: 2023-10-08 16:08:08
 * @LastEditors: lh
 * @LastEditTime: 2023-10-08 18:24:49
 * @Description: 
-->
<template>
  <div>
    <!-- 预览文件execl： <input type="text" v-model="excel" /> -->
    <vue-office-excel :src="excel" style="height: 90vh" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel"
//引入相关样式
import "@vue-office/excel/lib/index.css"

export default {
  components: {
    VueOfficeExcel
  },
  data() {
    return {
      // docx: "http://static.shanhuxueyuan.com/demo/excel.xlsx" //设置docx文档网络地址，可以是相对地址
      excel: "http://111.231.202.174:9000/my20231009/20231010_1696946258_993.xlsx"
    }
  },
  props: ["file"],
  created() {
    this.changeFile()
  },
  watch: {
    file() {
      this.changeFile()
    }
  },
  methods: {
    changeFile() {
      this.excel = this.file
    },
    rendered() {
      console.log("渲染完成")
    },
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    }
  }
}
</script>
